<template>


  <div>
    <div ref="myChart" style="width:50%;height:400px"></div>
    <div ref="myChart2" style="width:70%;height:500px"></div>
    <!--    <div ref="myChart3" style="width:100%;height:300px"></div>-->


    <!-- 柱状图 -->

    <!--<div style = "display:inline-block;left:230px;" id = "myBar" :style = " {width: '600px' ,height: '500px' ,} " ></div >-->
    <!--  <div style="width:60%;height:300px">-->
    <!--&lt;!&ndash;  <el-table v-loading="loading" :data="ftpAccountManagementList" @selection-change="handleSelectionChange">&ndash;&gt;-->

  </div>

</template>


<script>

  export default {
    name: "Chart",
    methods: {
      drawChart() {
        var echarts = require("echarts"); //引入echarts
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(this.$refs.myChart);
        let myChart2 = echarts.init(this.$refs.myChart2);
        // let myChart3 = echarts.init(this.$refs.myChart3);
        //图表内容
        let option = {
          //为图表配置标题
          title: {
            text: "",
          },
          //配置提示信息
          tooltip: {}, //有这句话，鼠标放上去会提示相应数据
          //配置要在 X 轴显示的项
          dataset: {
            source: [
              ['score', 'amount', 'product'],
              [89.3, 5, '网络'],
              [57.1, 3, '运维'],
              [74.4, 5, '姿安'],
              [50.1, 1, '安保'],
              [89.7, 1, '用户'],

            ]
          },
          grid: { containLabel: true },
          xAxis: { name: 'amount' },
          yAxis: { type: 'category' },
          visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
            inRange: {
              color: ['#65B581', '#FFCE34', '#FD665F']
            }
          },
          series: [
            {
              type: 'bar',
              encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
              }
            }
          ]
        };
        let option2 = {
          title: {
            text: "本周稽核缺失趋势图",
          },
          tooltip: {},
          //图例组件：展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
          xAxis: {
            type: 'category',
            data: ['H2627', 'P170', 'TUTU', 'K10']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [5, 6, 7, 9],
              type: 'line'
            }
          ]
        };
        // let option3 = {
        //   title: {
        //     text: "自定义圆环图",
        //   },
        //   color: ["#CBFEF8", "#FDFDE3", "#F3E5FE", "#A6FFE5", "#FAE5EC"],
        //   tooltip: {},
        //   legend: {
        //     x: "46%",
        //     y: "28%",
        //     orient: "vertical",
        //     data: ["aa", "bb", "cc", "dd", "ee"],
        //     formatter: function(name) {
        //       var index = 0;
        //       var clientlabels = ["aa", "bb", "cc", "dd", "ee"];
        //       var clientcounts = [800, 300, 200, 500, 400];
        //       clientlabels.forEach(function(value, i) {
        //         if (value == name) {
        //           index = i;
        //         }
        //       });
        //       return name + "  " + clientcounts[index];
        //     },
        //   },
        //
        //   calculable: false,
        //   series: [
        //     {
        //       name: "myCharts",
        //       type: "pie",
        //       //radius: "50%", // 设置为圆饼
        //       radius: ["30%", "60%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
        //       center: ["25%", "47%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
        //
        //       startAngle: 90, //开始旋转的角度
        //
        //       itemStyle: {
        //         normal: {
        //           label: {
        //             show: false,
        //             position: "inner",
        //           },
        //           labelLine: {
        //             show: false,
        //           },
        //         },
        //       },
        //       /*
        //        itemStyle: {
        //         normal: {
        //           label: {
        //             show: true,
        //             position: "outer",
        //           },
        //           labelLine: {
        //             show: true,
        //           },
        //         },
        //       },
        //       */
        //       data: [
        //         { value: 800, name: "aa" },
        //         { value: 300, name: "bb" },
        //         { value: 200, name: "cc" },
        //         { value: 500, name: "dd" },
        //         { value: 400, name: "ee" },
        //       ],
        //     },
        //   ],
        // };
        // 绘制图表
        myChart.setOption(option);
        myChart2.setOption(option2);
        // myChart3.setOption(option3);
      },
    },
    mounted() {
      //在mounted中调用,确保myChart需要展示的标签渲染出来
      this.$nextTick(() => {
        setTimeout(() => {
          this.drawChart();
        });
      });
    },
  };


</script>
